<template>
  <el-tree
      ref="treeRef"
      style="max-width: 600px"
      :data="data"
      :props="defaultProps"
      node-key="id"
      show-checkbox
      default-expand-all
  />
  <el-button @click="handleClick">hhh</el-button>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";

const treeRef = ref()
const defaultProps = {
  children: 'children',
  label: 'label',
  disabled: 'disabled',
}

const data = ref([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])
const setTreeIsDisabled = (data, nodeKeysToDisable, flag = true) => {
  if (!data || !data.length) return
  data.forEach(item => {
    if (nodeKeysToDisable && nodeKeysToDisable.length && nodeKeysToDisable.includes(item.id)) {
      // 如果当前节点的id主键在要禁用的id主键列表中，设置disabled为true
      item.disabled = flag;
    }
    // 如果当前节点有children，递归调用函数
    let itemChildren = item[defaultProps.children]
    if (itemChildren && Array.isArray(itemChildren)) {
      setTreeIsDisabled(itemChildren, nodeKeysToDisable, flag);
    }
  });
}

const findNodeByIdconst = (data, id) => {
  debugger
  if (!data || !data.length) return

  if(!id) return data


  data.forEach(item => {
    if (item.id == id) {
      // 如果当前节点的id主键在要禁用的id主键列表中，设置disabled为true
      return item
    }else {
      // 如果当前节点有children，递归调用函数
      let itemChildren = item.children
      if (itemChildren && Array.isArray(itemChildren)) {
        findNodeByIdconst(itemChildren, id);
      }
    }

  });
}

const handleClick = () => {
  setTreeIsDisabled(data.value,[7,8])
}

onMounted(()=>{

})
</script>
